<script setup>
import { ref } from 'vue'
import { getLegalAdvice } from '@/api/Ai.js'

const message = ref('')
const messages = ref([{
  text: '您好！我是智能法律咨询助手，很高兴为您提供法律相关的帮助。请描述您的问题，我会尽力为您解答。',
  time: new Date().toLocaleTimeString(),
  isUser: false
}])

const isLoading = ref(false)

const sendMessage = async () => {
  if (message.value.trim() && !isLoading.value) {
    // 添加用户消息
    messages.value.push({
      text: message.value,
      time: new Date().toLocaleTimeString(),
      isUser: true
    })
    
    const userMessage = message.value.trim()
    message.value = ''
    isLoading.value = true
    
    try {
      // 获取AI回复
      const aiResponse = await getLegalAdvice(userMessage, messages.value.map(msg => ({
        role: msg.isUser ? 'user' : 'assistant',
        content: msg.text
      })))
      
      // 添加AI回复
      messages.value.push({
        text: aiResponse,
        time: new Date().toLocaleTimeString(),
        isUser: false
      })
    } catch (error) {
      messages.value.push({
        text: '获取回复失败，请稍后再试',
        time: new Date().toLocaleTimeString(),
        isUser: false
      })
      console.error('AI请求错误:', error)
    } finally {
      isLoading.value = false
    }
  }
}
</script>

<template>
  <div class="consult-container">
    <h2>在线咨询</h2>
    
    <div class="messages">
      <div 
        v-for="(msg, index) in messages" 
        :key="index"
        :class="['message-container', { 'user-message': msg.isUser }]"
      >
        <div class="avatar">
          <img v-if="msg.isUser" src="https://picsum.photos/id/237/40/40" alt="用户头像">
          <img v-else src="https://picsum.photos/id/177/40/40" alt="客服头像">
        </div>
        <div class="message-bubble">
          {{ msg.text }}
          <span class="time">{{ msg.time }}</span>
        </div>
      </div>
      <div v-if="isLoading" class="loading-container">
        <div class="loading-animation"></div>
      </div>
    </div>
    
    <div class="input-area">
      <textarea 
        v-model="message" 
        placeholder="请输入您的咨询内容..."
        @keyup.enter="sendMessage"
        :disabled="isLoading"
      />
      <button @click="sendMessage" :disabled="isLoading">发送</button>
    </div>
  </div>
</template>

<style scoped>
.consult-container {
  height: 100%;
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
}

.messages {
  height: calc(100% - 120px); /* 减去输入区域高度 */
  border: 1px solid #eee;
  margin-bottom: 20px;
  padding: 10px;
  overflow-y: auto;
}

.input-area {
  height: 50px;
}

.message-container {
  display: flex;
  margin-bottom: 15px;
  max-width: 80%;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 10px;
  flex-shrink: 0;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.message-bubble {
  padding: 8px 12px;
  background: #f5f5f5;
  border-radius: 18px;
  position: relative;
  max-width: calc(100% - 50px);
}

.user-message {
  flex-direction: row-reverse;
  margin-left: auto;
}

.user-message .avatar {
  margin-right: 0;
  margin-left: 10px;
}

.user-message .message-bubble {
  background: #e3f2fd;
}

.time {
  display: block;
  font-size: 12px;
  color: #666;
  margin-top: 4px;
  text-align: right;
}

.loading-container {
  display: flex;
  align-items: center;
  padding: 10px;
}

.loading-animation {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #1976d2;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.input-area {
  display: flex;
  gap: 10px;
}

textarea {
  flex: 1;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  resize: none;
  height: 100%;
}

button {
  width: 100px;
  height: 100%;
  padding: 0;
  background: #1976d2;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background: #1565c0;
}
</style>